<template>
  <div id="app">
    <!-- 头部导航 -->
    <header class="app-header">
      <div class="container">
        <h1 class="app-title">🚀 Vue3 响应式基础实例</h1>
        <p class="app-subtitle">8个实战项目，带你掌握Vue3核心概念</p>
      </div>
    </header>

    <!-- 主要内容 -->
    <main class="app-main">
      <div class="container">
        <!-- 学习路径 -->
        <section class="learning-path">
          <h2>📚 学习路径</h2>
          <div class="path-cards">
            <div class="path-card">
              <div class="path-icon">🎯</div>
              <h3>核心概念</h3>
              <p>掌握ref、reactive、computed、watch等核心概念</p>
              <div class="path-level">关卡 1-5</div>
            </div>
            <div class="path-card">
              <div class="path-icon">🔧</div>
              <h3>实战练习</h3>
              <p>通过实际项目巩固所学知识</p>
              <div class="path-level">关卡 7</div>
            </div>
            <div class="path-card">
              <div class="path-icon">🎨</div>
              <h3>综合应用</h3>
              <p>结合TypeScript开发复杂应用</p>
              <div class="path-level">进阶</div>
            </div>
          </div>
        </section>

        <!-- 实例列表 -->
        <section class="examples-section">
          <h2>🎪 实例列表</h2>
          <div class="examples-grid">
            <div 
              v-for="example in examples" 
              :key="example.id"
              class="example-card"
              :class="{ 'is-completed': example.completed }"
            >
              <div class="example-header">
                <div class="example-icon">{{ example.icon }}</div>
                <div class="example-info">
                  <h3>{{ example.title }}</h3>
                  <span class="example-level">{{ example.level }}</span>
                </div>
              </div>
              
              <div class="example-body">
                <p>{{ example.description }}</p>
                <div class="example-features">
                  <span 
                    v-for="feature in example.features" 
                    :key="feature"
                    class="feature-tag"
                  >
                    {{ feature }}
                  </span>
                </div>
              </div>
              
              <div class="example-footer">
                <button 
                  class="btn btn-primary"
                  @click="loadExample(example)"
                >
                  查看示例
                </button>
                <button 
                  class="btn btn-secondary"
                  @click="viewCode(example)"
                >
                  查看代码
                </button>
              </div>
            </div>
          </div>
        </section>

        <!-- 快速导航 -->
        <section class="quick-nav">
          <h2>⚡ 快速导航</h2>
          <div class="nav-buttons">
            <a href="/examples/index.html" class="btn btn-success">
              📖 查看HTML导航页面
            </a>
            <button class="btn btn-primary" @click="showAbout">
              ℹ️ 关于项目
            </button>
            <button class="btn btn-secondary" @click="showHelp">
              ❓ 使用帮助
            </button>
          </div>
        </section>
      </div>
    </main>

    <!-- 底部 -->
    <footer class="app-footer">
      <div class="container">
        <p>&copy; 2024 Vue3 响应式基础实例 - 学习Vue3从这里开始</p>
      </div>
    </footer>

    <!-- 模态框 -->
    <div v-if="showModal" class="modal-overlay" @click="closeModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>{{ modalTitle }}</h3>
          <button class="modal-close" @click="closeModal">&times;</button>
        </div>
        <div class="modal-body">
          <component v-if="modalComponent" :is="modalComponent" />
          <div v-else-if="modalContent" v-html="modalContent"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

// 定义示例接口
interface Example {
  id: string
  title: string
  description: string
  icon: string
  level: string
  features: string[]
  file: string
  completed: boolean
}

// 响应式数据
const showModal = ref(false)
const modalTitle = ref('')
const modalContent = ref('')
const modalComponent = ref<any>(null)

// 示例列表
const examples = ref<Example[]>([
  {
    id: '01-ref-hero',
    title: 'ref英雄示例',
    description: '学习Vue3最基础的响应式概念ref，通过英雄升级系统展示ref的使用方法',
    icon: '🦸‍♂️',
    level: '关卡 1',
    features: ['ref基础', '响应式数据', '英雄系统', '等级提升'],
    file: '01-ref-hero-example.vue',
    completed: true
  },
  {
    id: '02-reactive-hero',
    title: 'reactive英雄升级',
    description: '深入学习reactive的复杂对象响应式管理，构建更完善的英雄系统',
    icon: '⚔️',
    level: '关卡 2',
    features: ['reactive对象', '复杂状态', '技能系统', '装备管理'],
    file: '02-reactive-hero-leveling.vue',
    completed: true
  },
  {
    id: '03-computed-shopping',
    title: 'computed购物车',
    description: '掌握computed计算属性的使用，实现购物车自动计算功能',
    icon: '🛒',
    level: '关卡 3',
    features: ['计算属性', '自动计算', '购物车', '价格统计'],
    file: '03-computed-shopping-cart.vue',
    completed: true
  },
  {
    id: '04-watch-demo',
    title: 'watch监听器',
    description: '学习watch和watchEffect的使用，实现数据变化的响应式监听',
    icon: '👂',
    level: '关卡 4',
    features: ['watch监听', 'watchEffect', '数据变化', '副作用处理'],
    file: '04-watch-watchEffect-demo.vue',
    completed: true
  },
  {
    id: '05-typescript',
    title: 'TypeScript类型推断',
    description: '结合TypeScript进行类型安全的响应式编程，提升代码质量',
    icon: '🔒',
    level: '关卡 5',
    features: ['类型安全', '泛型类型', '类型推断', '最佳实践'],
    file: '05-typescript-inference.vue',
    completed: true
  },
  {
    id: '06-temperature',
    title: '温度转换器',
    description: '实战项目：智能温度转换器，支持摄氏度与华氏度双向转换',
    icon: '🌡️',
    level: '关卡 7',
    features: ['双向转换', '温度状态', '历史记录', '快捷设置'],
    file: '06-temperature-converter.vue',
    completed: true
  },
  {
    id: '07-todo-list',
    title: '智能待办列表',
    description: '实战项目：功能完善的待办列表，支持优先级管理和统计分析',
    icon: '📝',
    level: '关卡 7',
    features: ['增删改查', '优先级管理', '过滤排序', '统计分析'],
    file: '07-todo-list-with-stats.vue',
    completed: true
  },
  {
    id: '08-mouse-tracker',
    title: '鼠标位置监听器',
    description: '实战项目：智能鼠标位置跟踪，支持历史轨迹和速度计算',
    icon: '🖱️',
    level: '关卡 7',
    features: ['位置跟踪', '历史轨迹', '象限分析', '速度计算'],
    file: '08-mouse-position-tracker.vue',
    completed: true
  }
])

// 计算属性
const completedCount = computed(() => {
  return examples.value.filter(example => example.completed).length
})

const totalCount = computed(() => examples.value.length)

// 方法
const loadExample = (example: Example) => {
  // 这里可以实现动态加载示例组件的逻辑
  console.log(`加载示例: ${example.title}`)
  modalTitle.value = example.title
  modalContent.value = `
    <div class="example-preview">
      <h4>📋 示例信息</h4>
      <p><strong>文件名:</strong> ${example.file}</p>
      <p><strong>难度等级:</strong> ${example.level}</p>
      <p><strong>核心功能:</strong> ${example.features.join(', ')}</p>
      <p><strong>描述:</strong> ${example.description}</p>
      <div class="preview-actions">
        <button class="btn btn-primary" onclick="window.open('/examples/${example.file}', '_blank')">
          打开示例文件
        </button>
      </div>
    </div>
  `
  showModal.value = true
}

const viewCode = (example: Example) => {
  modalTitle.value = `${example.title} - 代码预览`
  modalContent.value = `
    <div class="code-preview">
      <h4>💻 代码结构</h4>
      <p>示例文件: <code>examples/${example.file}</code></p>
      <div class="code-features">
        <h5>✨ 主要特性:</h5>
        <ul>
          ${example.features.map(feature => `<li>${feature}</li>`).join('')}
        </ul>
      </div>
      <div class="code-actions">
        <button class="btn btn-primary" onclick="window.open('/examples/${example.file}', '_blank')">
          查看完整代码
        </button>
      </div>
    </div>
  `
  showModal.value = true
}

const showAbout = () => {
  modalTitle.value = '关于项目'
  modalContent.value = `
    <div class="about-content">
      <h4>🎯 项目目标</h4>
      <p>通过8个精心设计的实例，帮助学习者掌握Vue3响应式系统的核心概念。</p>
      
      <h4>📖 学习路径</h4>
      <ol>
        <li><strong>基础概念 (关卡1-2):</strong> 掌握ref和reactive</li>
        <li><strong>进阶特性 (关卡3-5):</strong> 学习computed、watch和TypeScript</li>
        <li><strong>实战应用 (关卡7):</strong> 通过实际项目巩固知识</li>
      </ol>
      
      <h4>🛠️ 技术栈</h4>
      <ul>
        <li>Vue 3.4+ (组合式API)</li>
        <li>TypeScript (类型安全)</li>
        <li>Vite (构建工具)</li>
        <li>现代CSS (渐变、动画、响应式)</li>
      </ul>
    </div>
  `
  showModal.value = true
}

const showHelp = () => {
  modalTitle.value = '使用帮助'
  modalContent.value = `
    <div class="help-content">
      <h4>🚀 开始学习</h4>
      <p>建议按照关卡顺序学习，每个实例都有详细的注释和说明。</p>
      
      <h4>💡 学习建议</h4>
      <ul>
        <li>先阅读代码注释，理解核心概念</li>
        <li>尝试修改代码，观察效果变化</li>
        <li>完成每个实例的思考题</li>
        <li>结合实际项目应用所学知识</li>
      </ul>
      
      <h4>🔧 开发环境</h4>
      <p>项目已配置完整的开发环境，支持热重载和TypeScript类型检查。</p>
      
      <h4>📞 遇到问题</h4>
      <p>查看控制台输出，检查错误信息。每个示例都有详细的错误处理。</p>
    </div>
  `
  showModal.value = true
}

const closeModal = () => {
  showModal.value = false
  modalTitle.value = ''
  modalContent.value = ''
  modalComponent.value = null
}

// 生命周期
onMounted(() => {
  console.log('🎉 Vue3 响应式基础实例应用已加载')
  console.log(`📊 已完成 ${completedCount.value}/${totalCount.value} 个实例`)
  
  // 添加页面加载动画
  document.body.classList.add('loaded')
})
</script>

<style scoped>
.app-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 2rem 0;
  text-align: center;
  color: white;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.app-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.app-subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  margin: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.app-main {
  flex: 1;
  padding: 2rem 0;
}

.learning-path {
  margin-bottom: 3rem;
}

.learning-path h2 {
  text-align: center;
  color: white;
  font-size: 2rem;
  margin-bottom: 2rem;
}

.path-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.path-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.path-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.path-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.path-card h3 {
  color: #2d3748;
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.path-card p {
  color: #4a5568;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.path-level {
  display: inline-block;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
}

.examples-section {
  margin-bottom: 3rem;
}

.examples-section h2 {
  text-align: center;
  color: white;
  font-size: 2rem;
  margin-bottom: 2rem;
}

.examples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.example-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.example-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.example-card:hover::before {
  transform: scaleX(1);
}

.example-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.example-card.is-completed {
  border-left: 4px solid #48bb78;
}

.example-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.example-icon {
  font-size: 2rem;
  margin-right: 1rem;
}

.example-info h3 {
  color: #2d3748;
  margin: 0 0 0.25rem 0;
  font-size: 1.2rem;
}

.example-level {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

.example-body {
  margin-bottom: 1.5rem;
}

.example-body p {
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.example-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.feature-tag {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

.example-footer {
  display: flex;
  gap: 1rem;
}

.quick-nav {
  text-align: center;
  margin-bottom: 3rem;
}

.quick-nav h2 {
  color: white;
  font-size: 2rem;
  margin-bottom: 2rem;
}

.nav-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.app-footer {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  padding: 2rem 0;
  text-align: center;
  color: white;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.app-footer p {
  margin: 0;
  opacity: 0.8;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.modal-content {
  background: white;
  border-radius: 16px;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  animation: scaleIn 0.3s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid #e2e8f0;
}

.modal-header h3 {
  margin: 0;
  color: #2d3748;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #718096;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: #f7fafc;
  color: #2d3748;
}

.modal-body {
  padding: 1.5rem;
}

/* 模态框内容样式 */
.example-preview,
.code-preview,
.about-content,
.help-content {
  line-height: 1.6;
}

.example-preview h4,
.code-preview h4,
.about-content h4,
.help-content h4 {
  color: #2d3748;
  margin-bottom: 1rem;
}

.example-preview p,
.code-preview p,
.about-content p,
.help-content p {
  margin-bottom: 1rem;
}

.code-features ul,
.about-content ol,
.help-content ul {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.code-features li,
.about-content li,
.help-content li {
  margin-bottom: 0.5rem;
}

.preview-actions,
.code-actions {
  margin-top: 1.5rem;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .app-title {
    font-size: 2rem;
  }
  
  .examples-grid {
    grid-template-columns: 1fr;
  }
  
  .example-footer {
    flex-direction: column;
  }
  
  .nav-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .modal-content {
    margin: 1rem;
    max-width: calc(100vw - 2rem);
  }
}

/* 页面加载动画 */
body.loaded .app-header {
  animation: slideIn 0.8s ease-out;
}

body.loaded .learning-path {
  animation: fadeIn 1s ease-out 0.2s both;
}

body.loaded .examples-section {
  animation: fadeIn 1s ease-out 0.4s both;
}

body.loaded .quick-nav {
  animation: fadeIn 1s ease-out 0.6s both;
}
</style>